/*------------------------------------
	[Table of contents]
	1. Body
	2. Header / #header
	3. Navigation / #navbar
	4. Content / #content
	5. Sidebar / #sidebar
	6. Search / #search
	7. Footer / #footer
	
--------------------------------------*/
@import "bootstrap/mixin";
@import "bootstrap/mixin-style-search";
body{@include background-image("img/BG-home1.jpg",-515px 0,auto);}
@media (min-width: 1400px){
	.container{
	width:1380px;
	}
}
	
	header{
	padding:30px 0;
	.menu-main{position:relative;padding-top:20px;
	li{padding-right:22px;
	&:first-child{a{padding-left:0;}}
	&.menu-home{
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding-left: 20px;
						.li-home{list-style-type: none; margin-left: -18px;padding: 10px 0;i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none; color: black;font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.shop-menu{#shop-1{@include figure;}&:hover{#shop-1{@include figure-hover;}}
	.dropdown-menu{border-radius: 0;border: 0;left: -336px;	top: 70%;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: all .35s ease;
			ul{padding: 10px 0;a{@include font-face(Poppins,14px,600);&:hover{text-decoration:none;opacity: .5;}}
				li{
					list-style-type: none;
					.menu-home-lv2{
						ul{
						.li-home{ 
							@media (min-width: 1025px){
								margin-left: -18px;
							}
							padding: 10px 0;i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;}
						&.li-one{padding-top: 30px;}
						a{transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none; color: black;font-weight: 600;opacity: 1;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{display:inline-block;text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
					}
				}
			}
			.li-banner{padding: 20px 20px 0 0;
				img{width: 100%;}
			}
		}
		&:hover{
			.dropdown-menu{
				visibility: visible;
				opacity: 1;
				transform: translateY(15px);
			}
		}

	}
	&.menu-home{#home-1{@include figure;left: -5px;}&:hover{#home-1{@include figure-hover;}}}
	&.shop-menu{#shop-1{@include figure;}}
	&.wedding-menu{#wedding-1{@include figure;}&:hover{#wedding-1{@include figure-hover;}}}
	&.blog-menu{
		#blog-1{@include figure;visibility: visible;opacity: 1;left: 15px;}&:hover{#blog-1{@include figure-hover;}}
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding:0 20px;width: 300px;
						.li-home{list-style-type: none;padding: 10px 15px;i{visibility: hidden;opacity: 0;transition: all .3s ease;
							@media (min-width: 1025px){
								margin-left: -18px;
							}
						}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;padding-left: 5px;
							&:hover{text-decoration:none; color: black;font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.contact-menu{#contact-1{@include figure;}&:hover{#contact-1{@include figure-hover;}}}

	a{&:hover{background-color:unset;}@include font-face(Poppins,18px,lighter);&#blog-menu{font-weight:bold;}&:focus{background-color:unset;}}
	}
}
.icon-menu{position:relative;padding-top:20px;&::before{content:"3";width:20px;height:20px;background-color:black;position:absolute;text-align: center;right:18px;border-radius: 50%;
	top: 30px;color: white;}
	li{
	.fa-user{font-size:22px;padding-right:45px;color:black;}
	img{padding-right:15px;&#search-img{margin-right:40px;}}
	a{&:hover{background-color:unset;}&:focus{background-color:unset;}}
	&#input-search{
		position:relative;
	.alert-search{position:absolute;width: 230px;top: 50px;right: 40px;background:rgba(255,255,255,0.95);
	border: 0;border-radius: 0;padding: 0 25px;box-shadow:0 10px 10px rgba(0,0,0,0.05);
	.close{position:absolute;top: 4px;right: 6px;}
	.form-group{.form-control{@include input-defaut;border-bottom:1px solid grey;}margin:10px 0;}
	}
	}
	}
	.cart-menu{
		.dropdown-menu{
			position: absolute;
			background: #fff;
			right: 20px;
			border: 0;
			border-radius: 0;
			width: 310px;
			padding: 20px;
			#div-cart-menu{
				display: inline-flex;
			}
			a{@include btn-shopnow;@include font-face(Poppins,14px,400);color: #fff;padding: 10px 15px;
				&.check{margin-left: 30px;}
			}
		}
		.cart-1{
			padding-bottom: 20px;
			clear: left;
			display: inline-block;
		}
		.img-cart{
			width: 30%;
			float: left;
		}
		.info-cart{
			padding-left: 15px;
			float: left;
			h1{@include font-face(Poppins,14px,600);margin-top: 0;}
			span{@include font-face(Poppins,14px,500);
				&.number{padding-right: 30px;}
				&.prince-cart{font-weight: 600;}
			}
		}
		.total{
			padding: 0 15px 30px 0;
			@include font-face(Poppins,16px,600);
			span{margin-right: 40px;}
		}
	}
}
}
.banner{position: relative;
	.text-banner{
		position: absolute;
		
		left: 170px;
		top: 100px;
		h1{@include font-face(Abril Fatface,60px,400);margin-bottom: 0;}
		p{@include font-face(Poppins,30px,400);margin-bottom: 30px;color: #8f8f8f;}
		a{@include btn-shopnow;}

	}
	#banner-figure{
		@include figure-animation;
			@include figure-animation-2;
	}
}
.content{
	padding: 50px 15px;
	form{
		input{@include font-face(Poppins,14px,400);@include input-defaut;background:#ebebeb;width: 28%;&::-webkit-input-placeholder{@include font-face(Poppins,14px,400);}}
		button{@include btn-defaut(transparent);position:absolute;top: 13px;left:24%;  i{color: black;font-size: 18px;}}
	}
	.content-blog{
	.product-blog{&:hover{img{opacity:.7;transform:scale(.98);}}
		padding:25px 0;
		img{
			@media (min-width: 1024px){
				width: 90%;
			}
			margin-left: 0 !important;transition:all .35s ease;}
	}
	.title-blog{
		h2{a{@include font-face(Abril Fatface,24px,400);text-align:left;width:90%;margin-top: -10px;&:hover{text-decoration:none;}}}
		p{@include font-face(Poppins,14px,400);text-align:left;width:90%;color:black;padding-bottom: 30px; line-height: 27px;}
	.time-blog{padding-bottom: 20px;
		.time{i{color:grey;padding-right:10px;}span{@include font-face(Poppins,14px,400);color:grey;}
		display: inline-block;padding-right:25px;margin-top:20px;&:first-child{border-right:1px solid lightgrey;}&:last-child{padding-left:25px;i{padding-right:5px;}}}
	}
		a{@include font-face(Abril Fatface,18px,400);transition: all .3s ease;&:hover{color: pink;text-decoration: none;}}
	}
	.pagi{padding-bottom: 150px;
		text-align: right;
		.pagination{
			li{	display: inline-block;
				a{@include font-face(Poppins,14px,400);
					img{width: 50%;margin:auto;transition: all .3s ease;}
					background:#eeeeee;
					border:0;
					padding: 6px 10px;
					color:black;
					&:hover{
						background: black;
						color: #fff;
					}
				}
				&:first-child{a{border-radius:0;background: black;color: #fff;}}
				&:last-child{a{border-radius:0;padding: 10px 1px;&:hover{background:#eeeeee;img{transform: translateX(2px);}}}}
				margin:2px;
				
			}
		}
	}
}
}
.sidebar{
	.list-group{padding-bottom: 30px;&.list-1{margin-top: 30px;}
		.list-group-item{@include font-face(Poppins,14px,600);color: #b0b0b0;padding: 20px;
			a{&:focus{text-decoration:none;}}
			&:first-child{border-radius: 0;font-size: 18px;color: black;}
			&:last-child{border-radius: 0}

		}
	}
	#mysidebar{
		.list-1{
			a{
				@include font-face(Poppins,14px,600);
				color: #a8a8a8;
    			text-align: left;
    			outline: none;
    			transition: 0.3s;
    			&:hover{color:black;text-decoration: none;}
			}
			.accordion{
				display: inline-block;
				padding: 0;
				float: right;
				@include btn-defaut(transparent);
    			&:after{
    				content: '\002B';
    				color: #777;
    				font-weight: bold;
    				float: right;
    				margin-left: 5px;
    			}
    			&.active{color:black;padding-bottom: 10px;
    				&:after{content: "\2212";}
    					}
				}
		}
		.panel{
		margin: 0;
		border: 0;
		padding: 0 18px;
    	background-color: white;
    	max-height: 0;
    	overflow: hidden;
    	transition: max-height 0.2s ease-out;
    	li{list-style-type: none;margin-left: -18px;padding: 15px 0 5px 0;
    		a{@include font-face(Poppins,14px,400);color:#b0b0b0;&:hover{text-decoration:none;color: black;}}
    	}
		}
	}
	
	
	.list-2{
		.list-group-item{
			h1{@include font-face(Abril Fatface,14px,400);margin-top: 0;}
			p{@include font-face(Poppins,12px,400);color: #a8a8a8;}
			&.list-item-2{display: inline-block;    margin-bottom: -6px;.col-lg-5{padding: 0;}}
		}
	}
	.panel-default{background:#fff;
		.panel-header{padding:20px;border: 1px solid #ddd;@include font-face(Poppins,18px,600);}
		.panel-body{padding: 20px;border: 1px solid #ddd;border-top: 0;
			p{@include font-face(Poppins,14px,400);color: #a8a8a8;margin-bottom: 5px;}
		}
	}
	.blog-tag{
		h1{@include font-face(Poppins,18px,600);margin:30px 0 20px 20px;}
		a{background: #eeeeee; text-align: center;margin: 4px 2px 4px 0;display: inline-block;
			@include font-face(Poppins,14px,400);color: black;padding: 10px 15px;
			&.active-tags{background: black;color: #fff;padding: 10px;}
		&:hover{background: black;
			color: #fff;text-decoration:none;
		}
		}
	}
}
.info-footer{padding: 140px 0;border-top: 1px solid #ddd;
	h3{@include font-face(Abril Fatface,18px,400);padding-bottom:30px;}
	ul{padding:0;
	li{list-style-type:none;padding-bottom:15px;
		i{margin-left: -16px;padding-right: 5px;visibility: hidden;opacity: 0;transition: all .3s ease;}
		a{transition: all .3s ease;
		@include font-face(Poppins,14px,400);color:grey;&:hover{text-decoration:none;color:black;font-weight:600;}}
		&:hover{
			i{visibility: visible;opacity: 1;transform: translateX(16px);}
			a{display: inline-block; text-decoration:none;color:black;font-weight:600;transform: translateX(16px);}
		}
	}
	}
	.social{
		p{@include font-face(Poppins,14px,500);padding-top: 15px;}
		a{display: inline-block;width: 35px;height: 35px;margin-right: 10px; opacity: .3;transition: all .5s ease;
			&#link-insta{@include background-image("img/social-v3.png",0 0,35px);}
			&#link-fb{@include background-image("img/social-v3.png",-35px 0,35px);}
			&#link-tw{@include background-image("img/social-v3.png",-70px 0,35px);}
			&#link-sky{@include background-image("img/social-v3.png",-105px 0,35px);}
			&:hover{
				opacity: 1;
			}
		}
		h1{@include font-face(Abril Fatface,30px,400);padding-top: 10px;}
		h2{@include font-face(Poppins,14px,400);color: #888888;}
		form{position: relative;margin-top: 10px;
			input{@include input-defaut;border-radius: 40px;border: 1px solid #cfcfcf;width: 100%;padding-left: 20px;
			&::-webkit-input-placeholder{@include font-face(Poppins,14px,400);}
		}
		button{@include btn-defaut(transparent);position: absolute;right: 20px;top: 10px; 
			img{transition: all .3s ease;}
			&:hover{
				img{transform: translateX(5px);}
			}
		}
		}
		
	}
}
footer{background: #f4f4f4;padding-bottom: 22px;
	.logo-bot{display:inline-block;@include background-image("img/logo.png",0 -46px,33px);width:104px;margin-top: 40px;}
	span{
	display:inline-block;@include font-face(Poppins,14px,300);padding-top:40px;&#gmail-footer{a{font-weight:400;font-size:13px;color:black;&:hover{text-decoration:none;color:pink;}}
	padding-top:45px;}}
	i{padding:0 5px;}
	.gmail-footer{text-align: right;}
	.copy{text-align: center;}
}